<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5</title>
<script type="text/javascript">
	window.onload = function(){
		//得到画布
		var canvas1 = document.getElementById("c1");
		var canvas2 = document.getElementById("c2");
		//得到绘图上下文(你可以理解是画笔)
		var ctx1 = canvas1.getContext("2d");
		var ctx2 = canvas2.getContext("2d");
		ctx1.strokeStyle="#99cc33";
		ctx1.fillStyle='rgba(50,0,0,0.7)';
		ctx1.lineWidth=10;
		ctx1.fillRect(10,10,100,100);
		ctx1.globalCompositeOperation=destination-over;
		ctx1.strokeRect(20,20,100,100);
	
	}

</script>
</head>
<body>
<canvas id="c1" style="background-color: #9DB4DB"></canvas>
<canvas id="c2" style="background-color: #FABC95"></canvas>

</body>
</html>